<template>
  <div class="tournament-bonus">
    <el-table :data="list" border style="width: 100%">
      <el-table-column fixed prop="id" label="名次" width="150"></el-table-column>
      <el-table-column prop="money" label="奖金" width="120"></el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">修改奖金</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next"
      :total="totalElements"
      @current-change="handleCurrentChange"
    ></el-pagination>

    <el-dialog :title="`修改第${form.id}名的奖金`" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="奖金">
          <el-input v-model="form.money" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleChangeConfirm" :loading="changeNow">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'tournamentBonus',
  data() {
    return {
      pageSize: 10,
      totalElements: 10,
      nowPage: 1,
      list: [],
      dialogFormVisible: false,
      form: {
        id: '',
        money: ''
      },
      changeNow: false,
    }
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      const page = this.nowPage - 1
      const { data: res } = await this.$http({
        url: this.$http.adornUrl2('/gameRecord/findTeamRanking'),
        method: 'get',
        params: this.$http.adornParams({
          page,
          size: this.pageSize,
        })
      });
      const { data, status } = res;
      if (status === 0) {
        this.totalElements = data.totalElements;
        this.nowPage = data.number;
        this.list = data.content;
      }
    },
    handleClick(row) {
      this.dialogFormVisible = true;
      this.form = row;
    },
    async handleCurrentChange(e) {
      this.nowPage = e;
      this.getData();
    },
    async handleChangeConfirm() {
      this.changeNow = true;
      const { data: res } = await this.$http({
        url: this.$http.adornUrl2('/gameRecord/updateTeamRanking'),
        method: 'get',
        params: this.$http.adornParams({
          id: this.form.id,
          money:  this.form.money,
        })
      })

      this.changeNow = false;
      this.dialogFormVisible = false;

      this.getData();
    }
  }
}
</script>
